<template>
<view>
	<u-navbar :is-back="false" title="交单记录"
	  title-size="30"
	  :background="{background:'#2B88FE' }"
	  title-color="#fff">
	  <div class="head_icon">
	    <u-icon @click="$api.handleBackTo"
	      name="arrow-left" color="#fff"
	      size="36">
	    </u-icon>
	    <u-icon @click="$api.handleHomeTo"
	      name="home" color="#fff" size="36">
	    </u-icon>
	  </div>
	</u-navbar>
	
<!--交单需要更新的数据：任务表的报表ID和状态、订单的报表ID和状态、领货单的报表ID和状态-->

  <div
    class="app-draw-record">
    <div class="draw-head">
      <u-button type="primary"
        size="medium"
        @click="handleUrlAdd">
        新增交单</u-button>
      <u-input
        v-model="search"
        :border="true" />
    </div>
    <u-empty text="暂无数据"
      mode="list"
      v-if="!clist.length">
    </u-empty>
    <div class="draw-content"
      v-for="(item,index) in clist">

      <view class="info borderBottom x-row">
        <view class="x-col">
          <view class="itxt u-skeleton-fillet">
            审核状态： <span
          :class="item.fStatus==1?'text-red':'text-blue'">{{item.fStatus==1?'待管理员审核':'已审核'}}</span>
          </view>
          <view class="itxt u-skeleton-fillet">
            提交人：{{item.fUserName}}
          </view>
          <view class="itxt u-skeleton-fillet">
            提交时间： {{item.fUpdateTime}}
          </view>
		  <view class="itxt u-skeleton-fillet">
		    订单数量： {{item.fOrderCount}}
		  </view>
          <view class="itxt u-skeleton-fillet">
            订单金额：{{item.fOrderMoney}}   
          </view>
		  <view class="itxt u-skeleton-fillet">
		    交款金额：{{item.fPayMoney}}    
			<view class="mingxi"
		     @click="$api.navigator(`/pages/driver/carreport_detail?id=${item.fId}`)">
		    查看详情<text class="iconfont icond-arrow-right"></text>
		  </view>
		  </view>
        </view>
      </view>

    </div>
  </div>
</view></template>

<script>
import appProduct from '@/components/app-product'
export default {
  components: {
    appProduct
  },
  data() {
    return {
      state: 2,
	  pagetitle:'交单记录',
      date: '',
      search: '',
      clist: []
    }
  },
  onLoad() {
 
  },
  onShow() {
    this.getclist()
  },
  methods: {
    getclist() {
     
      this.$axios('api/CarReport/ListPaged', 'post', { value: '' }).then(res => {
        this.clist = res.Value.List
		console.log('clist ', this.clist)
      })
    },
    handleUrlAdd() {
      uni.navigateTo({
        url: '/pages/driver/carreport_add'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.draw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  u-button,
  u-input {
    width: 45%;
  }
}
.u-btn {
  margin-right: 20rpx;
}
.draw-content {
  .date {
    padding-top: 32rpx;
    span + span {
      margin-left: 10rpx;
    }
  }
  padding: 0 20rpx;
}
.text-red {
  color: red;
}
.text-blue {
  color: blue;
}

      .mingxi {
        font-weight: 400;
        color: #2b88fe;
        line-height: 42rpx;

        .iconfont {
          font-size: 25rpx;
        }

        display: inline-block;
        margin-left: 16rpx;
      }
  .info {
    padding: 32rpx 32rpx 16rpx 32rpx;
    box-sizing: border-box;

    .itxt {
      padding-bottom: 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #34404a;
      line-height: 40rpx;
    }

    .photoShowIcon {
      width: 64rpx;
      height: 64rpx;
    }
  }	  
</style>